<template>
	<view class="login">
		<view class="login_box">
			<view class="login_img">
				<image class="login_icon" src="/static/newsImg/logo_icon.png" mode=""></image>
				<image class="login_name" src="/static/newsImg/logo_name.png" mode=""></image>
				<view class="title">欢迎来到神椰 Magic CoCo</view>
				<view class="subtitle">享受更优的数字权益</view>
			</view>
			<view class="input_box">
				<view class="input_box_li">
					<input type="number" value="" placeholder="请输入手机号" maxlength="11" v-model="phone"
						placeholder-class="placeholder_class" />
				</view>
				<view class="input_box_li" >
					<input type="text" maxlength="6" value="" placeholder="请输入验证码" v-model="smscode"
						placeholder-class="placeholder_class" />
					<verification-code :seconds="seconds" ref="verCode" @start="start" @end="end" :phone="phone">
					</verification-code>
				</view>
			</view>
			<view class="gou">
				<view class="image-box" @click="gouFunc">
					<image :src="status?'/static/my/gou.png':'/static/my/gou_no.png'" mode=""></image>
				</view>
				<text>我已同意<text @click="jumptext(1)">《神椰隐私保护协议》</text>和<text @click="jumptext(2)">《神椰用户服务协议》</text></text>
			</view>
			<view class="button_box">
				<view class="button_name" v-if="status && phone != '' && smscode != '' " @click="realName">登录</view>
				<view class="button_name button_name_no" v-else @click="effective">登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				msg: '获取验证码',
				smscode: '',
				code:'',
				phone: '',
				status: false,
				blindboxStatus:false, //判断是否是盲盒登录
				seconds: 60, //倒计时时间
				linkJump:''
			}
		},
		onLoad(e) {
			if(e.blindboxStatus != undefined){
				this.$queue.setData('blindboxStatus',true)
			}
			if(e.linkJump != undefined){
				this.linkJump = e.linkJump
			}
			// console.log(this.code)
			// else {
			// 	this.code = e.code
			// }
		},
		onShow() {
			this.code = this.getUrlParam('code')
			var codeData = this.$queue.getData('code')

			if (this.code == null || this.code == '' || this.code == undefined ) {
				app.getLogin()
			}else if(codeData == this.code){
				app.getLogin()
			}
			else{
				this.$queue.setData('code',this.code)
				this.blindboxStatus = this.$queue.getData('blindboxStatus')
				setTimeout(()=>{
					uni.removeStorageSync('blindboxStatus')
				},2000)
			}
			if(uni.getStorageSync('tel') != undefined){
				this.phone = uni.getStorageSync('tel')
			}
			
		},
		methods: {
			getUrlParam(name) {
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
				var r = window.location.search.substr(1).match(reg)
				if (r != null) return unescape(r[2])
				return null
			},
			// 效验参数
			effective() {
				if (this.phone == '') {
					this.$queue.showToast('请输入手机号码');
					return false;
				} else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					this.$queue.showToast('请输入正确的手机号');
					return false;
				} else if (this.smscode == '') {
					this.$queue.showToast('请输入手机验证码');
					return false;
				} else if (!this.status) {
					this.$queue.showToast('请勾选协议');
					return false;
				}
			},
			// 倒计时
			async start() { //获取验证码
				console.log('开始')
				let phone = this.phone
				const res = await this.$api.sendCodeBtn(phone);
				this.$queue.setData('tel',this.phone)
				uni.showToast({
					icon: 'none',
					title: '发送成功,请注意查看短信'
				})
			},
			async realName() {
				console.log(this.blindboxStatus)
				var data = {
					phone: this.phone,
					code: this.smscode,
					wxCode:this.code,
					source:1
				}
				uni.showLoading({
					title: '登录中'
				})
				
				try {
					const res = await this.$api.login(data);
					this.$queue.setData('token', res.result.token)
					this.$queue.setData('isRealName', res.result.isRealName)
					if(res.result.isRealName){
						this.$queue.showToast('登录成功')
						// 判断是否有链接转跳
						if(this.linkJump != ''){
							setTimeout(() => {
								uni.redirectTo({
									url: this.linkJump
								})
							}, 800)
						}else{ 
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}, 800)
						}

					}else{
						this.$queue.showToast('请实名！')
						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/my/certification/certification?isRealName='+res.result.isRealName+'&blindboxStatus='+this.blindboxStatus
							})
						}, 1000)

					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(() => {
						uni.hideLoading()
					}, 2000)
				}

			},
			end() {
				console.log('结束')
			},
			gouFunc() {
				this.status = !this.status
			},
			jumptext(e){ //1:隐私协议，2：服务协议
				uni.navigateTo({
					url:'text-box?type=' + e
				})
			},
		}
	}
</script>

<style scoped>
	page{
		height: 100%;
	}
	.login {
		width: 750rpx;
		height: 100%;
		min-height: 1458rpx;
		background: url("/static/newsImg/logo_bg.jpg") no-repeat;
		background-size: 100% 100%;
		padding-top: 140rpx;
		box-sizing: border-box;
	}

	.login_box {
		width: 750rpx;
		padding: 0 48rpx;
		box-sizing: border-box;
	}
	.login_img{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.login_icon {
		width: 284rpx;
		height: 202rpx;
		margin-left: 70rpx;
	}
	.login_name{
		width: 156rpx;
		height: 94rpx;
		margin-top: 12rpx;
	}

	.login_box .title {
		margin-top: 16rpx;
		font-weight: 400;
		font-size: 36rpx;
		line-height: 50rpx;
		color: #373950;
	}

	.login_box .subtitle {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	.input_box {}

	.input_box .input_box_li {
		width: 100%;
		padding: 0 38rpx;
		box-sizing: border-box;
		height: 100rpx;
		margin-top: 40rpx;
		/* border-bottom: 2rpx solid #D9D9D9; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 18rpx #DDE1EA;
		border-radius: 200rpx;
	}

	.input_box .input_box_li:nth-child(2) input {
		width: 50%;

	}

	.input_box_li .placeholder_class {
		font-weight: 400;
		font-size: 34rpx;
		line-height: 48rpx;
		color: #ACAEB9;
	}

	.gou {
		font-size: 24rpx;
		color: #333333;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
	}

	.image-box {
		width: 30rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.gou image {
		width: 26rpx;
		height: 26rpx;
		/* margin-top: 4rpx; */
	}

	/* 登录按钮 */
	.button_box {
		margin-top: 80rpx;
	}

	.button_name {
		width: 100%;
		height: 100rpx;
		margin: 0 auto;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 16rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 100rpx;
		text-align: center;
		margin-top: 36rpx;
		border-radius: 200px;
	}

	.button_name_no {
		opacity: .5;
	}

</style>
